<script>
import {ref} from "vue";

export default {
  name: 'Dialog',
  setup() {
    let isShow = ref(false);
    return {
      isShow
    }
  }
}
</script>

<template>
  <div>
    <button @click="isShow=!isShow" :disabled="isShow">点我弹窗</button>
    <Teleport to="body">
      <div class="mask" v-if="isShow">
        <div class="dialog">
          <!--    需要传送的结构 to:传送到哪里,可以直接参考传送的位置写定位,并且在传送原来的位置会消失(就像v-if)-->
          <h3>我是一个弹窗</h3>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <h4>一些内容</h4>
          <button @click="isShow=!isShow">关闭弹窗</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}

.dialog {
  margin: auto;
  position: relative;
  top: 30%;

  width: 300px;
  height: 300px;
  background-color: deepskyblue;
}
</style>